<template>
   <div style="height: 100%;">
    <div class="merak-container-has-aside">
        <div class="merak-aside" :class="{'hide-aside':isChecked,'newHeight':isZh}" v-if="$slots.left">

            <div class="left-content">
                <slot name="left"></slot>
            </div>

            <div class="left_menu_toggle_btn" v-if="toogleShow">
                <el-icon>
                    <DArrowLeft />
                </el-icon>
                <input class="input_left_check" type="checkbox" v-model="isChecked" />
            </div>
        </div>
        <div v-waterMarker="{zIndex: 10}"  class="merak-card merak-container-has-search">
            <slot name="right">
                <div >
                    <slot name="search"></slot>
                </div>
                <div class="merak-table-wrapper">
                    <slot name="content"></slot>
                </div>
            </slot>
        </div>
    </div>
   </div>
</template>
<script name="layoutContent" setup lang="ts">
    import { ref, reactive, withDefaults,computed  } from "vue";
	import {
		useGlobalStore
	} from "@/stores/modules/global";
	const {
		language
	} = useGlobalStore();
	const isZh = computed(() => language !== 'zh');//页面翻译语种
    const isChecked = ref(false);
    // 使用 withDefaults 设置默认值
    const props = withDefaults(
        defineProps < {
            toogleShow?: Boolean,//是否显示收缩
        } > (),
        {
            toogleShow: () => false
        }
    );

</script>

<style lang="scss" scoped>
    @import url(./index.scss);
</style>